<template>
  <view class="container">
    <image src="/static/images/login/msg_bg.png" mode="scaleToFill" class="bg-st" />
    <!-- <view class="header flex status-bar-height">
      <view class="flex flex-align-items" @click="back">
        <uni-icons type="back" size="24" color="#333"></uni-icons>
      </view>
    </view> -->

    <view class="form-box">
      <view class="image-box">
        <image src="/static/images/login/login-title.png" mode="scaleToFill" class="login-title" />

      </view>
      <!-- <view class="text-box">
        让音乐流转
      </view> -->
      <view class="form">
        <view class="form-item">
          <view class="form-value">
            <input v-model="form.mobile" type="tel" placeholder="请输入手机号" maxlength="11" class="font-32-M">
          </view>
        </view>

        <view class="form-item">
          <view class="form-value">
            <input v-model="form.captcha" type="text" placeholder="请输入验证码" maxlength="6" class="font-32-M">
            <text class="send-btn font-32-M" @click="sendCode">{{ codeBtnTxt <10?'0'+codeBtnTxt:codeBtnTxt}}</text>
          </view>
        </view>
        <view class="form-btn bg-main font-28-M" :class="form.mobile!=''?'opacity1':''" @click="submit">登录/注册
        </view>
        <view class="new-btn  font-28-M" @click="toPath('/pages/login/loginMM?type=1')">密码登录</view>

      </view>
      <view class="agreement flex-center flex-align-items font-24-M" @click="form.agreementCheck = !form.agreementCheck">
        <uni-icons :type="form.agreementCheck ? 'checkbox' : 'circle'" size="20" class="uni-icons" :style="{ color: form.agreementCheck ? '#ffffff' : '#ffffff' }"></uni-icons>
        我已阅读并同意
        <text class="font-24-M color-main" @click.stop="toAgreement('agreement')">《用户注册协议》</text>
        <text class="font-24-M color-main" @click.stop="toAgreement('policy')">《隐私政策》</text>
      </view>
    </view>

    <x-modal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      <view class="winbox">
        <view>由于您{{contractObj.black_remark}}， 账号已被封禁 <text class="fontst"> {{contractObj.black_days}}</text>天</view>
        <view>预计解封时间为：<text class="fontst">{{contractObj.black_end}}</text></view>
        <view>如有疑问请联系管理员</view>

      </view>

    </x-modal>
  </view>
</template>

<script setup>
import {
  onLoad
} from '@dcloudio/uni-app';
import {
  ref,
  nextTick
} from 'vue';
import api from '@/api/index.js';
import verifyRules from '@/js/verifyRules.js';

const contractObj = ref({
  title: '提示',
  content: '',
  isShow: false,
  showBotton: false,
  cancelText: '取消',
  confirmText: '确认',
  showOneBotton: true,
  black_end: '',
  black_days: '',
  black_remark: ''
});
const cancel = (e) => {
  contractObj.value.isShow = false
}

const confirm = (e) => {
  contractObj.value.isShow = false
}
const title = {
  1: '手机号登录',
  2: '短信登录'
}
const form = ref({
  mobile: '',
  captcha: '',
  agreementCheck: false
});

const rules = ref({
  mobile: [{
    require: true,
    msg: '请输入手机号'
  }, {
    validator: value => {
      // 上面有说，返回true表示校验通过，返回false表示不通过
      return !uni.$u.test.mobile(value);
    },
    msg: '手机号码不正确'
  }]
});
const pwdShow = ref(false);
const codeBtnTxt = ref('获取验证码');
const interval = ref(null);

// 返回上一页
const back = () => {
  uni.navigateBack();
}
// 显示或隐藏密码
const pwdShowChange = () => {
  pwdShow.value = !pwdShow.value;
}
// 倒计时
const countdown = () => {
  if (interval.value) {
    clearTimeout(interval.value);
  }
  if (codeBtnTxt.value === '获取验证码' || codeBtnTxt.value > 1) {
    interval.value = setTimeout(() => {
      if (codeBtnTxt.value === '获取验证码') {
        codeBtnTxt.value = 29;
      } else if (codeBtnTxt.value >= 10) {
        codeBtnTxt.value--;
      } else if (codeBtnTxt.value > 1) {
        codeBtnTxt.value = "0" + codeBtnTxt.value
        codeBtnTxt.value -= 1
      }
      countdown();
    }, 1000);
  } else {
    setTimeout(() => {
      codeBtnTxt.value = '获取验证码'
    }, 1000);
  }
}
// 发送验证码
const sendCode = () => {
  if (codeBtnTxt.value !== '获取验证码') {
    return
  }

  if (!uni.$u.test.mobile(form.value.mobile)) {
    uni.showToast({
      title: '手机号码不正确',
      icon: 'none'
    });
    return
  }

  api.base.send({
    mobile: form.value.mobile,
    event: 'mobilelogin'
  }).then((res) => {
    if (res.code == 1) {
      countdown();
    }

  });
}
// 跳转协议
const toAgreement = type => {
  uni.navigateTo({
    url: `/pages/login/agreement?type=${type}`
  });
}



const getLoginCode = () => {
  return new Promise((resolve, reject) => {
    uni.login({
      provider: 'weixin', //使用微信登录
      success: res => {
        resolve(res);
      },
      fail: err => {
        reject(err)
      }
    });
  })
}

// 返回用户登录身份
const returnIdentity = () => {
  const loginTo = uni.getStorageSync('loginTo') // 1 用户  2 律师
  const lawyer_number = uni.getStorageSync('lawyer_number') // 律师的账号
  if (!loginTo) return 1; // 不存在 则表示是用户
  if (loginTo == 1) return 1;
  if (loginTo == 2 && lawyer_number && lawyer_number == form.value.mobile) return 2;
  return 1
}
// 跳转内页
const toPath = url => {
  uni.navigateTo({
    url
  });
}
// 提交登录信息
const submit = async () => {
  if (!form.value.agreementCheck) {
    uni.showToast({
      title: '请阅读并同意用户注册协议和隐私政策',
      icon: 'none'
    });
    return
  }
  if (!verifyRules(rules.value, form.value)) {
    return
  }

  api.base.mobilelogin({
    ...form.value,
  }).then(res => {
    if (res.code == 1) {

      uni.setStorageSync('userinfo', res.data.userinfo);

      uni.setStorageSync('token', res.data.userinfo.token);
      uni.switchTab({
        url: '/pages/index/index'
      });
    } else {
      if (res.msg == '账户被封禁') {
        contractObj.value.content = res.msg
        contractObj.value.isShow = true
        contractObj.value.black_days = res.data.black_days
        contractObj.value.black_remark = res.data.black_remark
        contractObj.value.black_end = res.data.black_end
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        return
      }
    }
  });

}

onLoad(() => {
  rules.value.captcha = [{
    require: true,
    msg: '请输入验证码'
  }];
  // #ifdef MP-WEIXIN
  form.value.terminal = 'weapp';
  // #endif
  // #ifdef APP-PLUS
  const systemInfo = uni.getSystemInfoSync();
  if (systemInfo.system.search('IOS') > -1) {
    form.value.terminal = 'ios';
  } else {
    form.value.terminal = 'android';
  }
  // #endif
});
</script>

<style lang="less" scoped>
page {
  background: #fff;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;

  .form-box {
    position: absolute;
    width: calc(100% - 100rpx);
    margin: 50rpx;
    height: 776rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    top: 312rpx;

    .image-box {
      padding: 58rpx 0 0 46rpx;

      .login-title {
        width: 222rpx;
        height: 166rpx;
      }
    }

    .text-box {
      padding-left: 46rpx;
      font-size: 28rpx;
      font-family: FZZhengHeiS-B-GB-Regular, FZZhengHeiS-B-GB;
      font-weight: 400;
      color: #999999;
    }
  }

  .form {
    width: calc(100% - 120rpx);
    margin: 60rpx;
  }
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  padding-left: 32rpx;
  background: #fff;

  view {
    height: 44px;

    text:nth-child(2) {
      color: #333;
      margin-left: 16rpx;
    }
  }
}

.title {
  color: #333;
  margin-bottom: 80rpx;
}

.form {
  .form-item {
    margin-bottom: 14rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .form-label {
      color: #666;
      margin-bottom: 16rpx;
    }

    .form-value {
      position: relative;

      input {
        width: 100%;
        height: 92rpx;
        padding-left: 32rpx;
        border-bottom: 2rpx solid #e6e6e6;
      }

      .uni-icons {
        position: absolute;
        right: 32rpx;
        top: 24rpx;
        z-index: 10;
        color: #ffffff;
      }

      .send-btn {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10;
        height: 92rpx;
        width: 122rpx;
        text-align: right;
        line-height: 92rpx;
        color: #6d0cf7;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        border-radius: 0 16rpx 16rpx 0;
      }
    }
  }
}

.form-btn {
  font-size: 24rpx;
  height: 104rpx;
  text-align: center;
  line-height: 104rpx;
  color: #fff;
  margin-top: 80rpx;
  background: #6d0cf7;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  opacity: 0.5;
}

.new-btn {
  text-align: center;
  font-size: 24rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  padding-top: 16rpx;
}

.opacity1 {
  opacity: 1;
}

.agreement {
  top: 1178rpx;
  color: #ffffff;
  margin-top: 94rpx;

  .color-main {
    color: #ffffff;
  }
}

.bg-st {
  width: 100%;
  height: 100%;
}

.winbox {
  font-size: 28rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  color: #666666;
  line-height: 48rpx;

  .fontst {
    color: #6d0cf7;
  }
}
</style>
<style>
page {
  background: #fff;
}
</style>